<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用jQuery写多个选项卡</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.cl {
				clear: both;
			}
			
			.xxk{
				float: left;
				margin: 20px;
			}
			
			.nav {
				width: 310px;
				margin: 5px auto 0;
				border-top: 3px solid #206F96;
			}
			
			.content {
				width: 310px;
				margin: 0 auto;
			}
			
			.nav ul li {
				float: left;
				width: 102px;
				height: 29px;
				border-left: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				text-align: center;
				line-height: 29px;
				background: url(img/bg.png) repeat-x;
			}
			
			.nav ul li.last {
				border-right: 1px solid #ccc;
			}
			
			.nav ul li.no_bg_btm {
				/*没有背景,层叠掉背景
				background: none;*/
				background: url();
				border-bottom: none;
			}
			
			.move123,
			.music123 {
				display: none;
			}
			
			.content ul li a {
				color: #505050;
				text-decoration: none;
			}
			
			.content ul li a:hover {
				color: blue;
				text-decoration: underline;
			}
		</style>
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1发生事件的标题(li)身上没有背景和下边框，其它 两个标题(li)身上有背景和下边框
			//2发生事件标题对应的 主体部分的那个ul显示，其它两个ul隐藏
			$(function() {
				$(".nav li").mouseover(function() {
					$(this).addClass("no_bg_btm").siblings().removeClass("no_bg_btm").parent().parent().siblings().children("ul").eq($(this).index()).show().siblings().hide();
				});
			});
		</script>
	</head>

	<body>
		<div class="xxk">
			<div class="nav">
				<ul>
					<li id="news" class="no_bg_btm">新闻</li>
					<li id="move">影视</li>
					<li id="music" class="last">音乐</li>
				</ul>
			</div>
			<div class="cl"></div>
			<div class="content">
				<ul class="news123">
					<li><a href="#">新闻1新闻1新闻1</a></li>
					<li><a href="#">新闻2新闻2新闻2</a></li>
					<li><a href="#">新闻3新闻3新闻3</a></li>
				</ul>
				<ul class="move123">
					<li><a href="#">影视1影视1影视1</a></li>
					<li><a href="#">影视2影视2影视2</a></li>
					<li><a href="#">影视3影视3影视3</a></li>
				</ul>
				<ul class="music123">
					<li><a href="#">音乐1音乐1音乐1</a></li>
					<li><a href="#">音乐2音乐2音乐2</a></li>
					<li><a href="#">音乐3音乐3音乐3</a></li>
				</ul>
			</div>
		</div>

		<div class="xxk">
			<div class="nav">
				<ul>
					<li id="news" class="no_bg_btm">新闻</li>
					<li id="move">影视</li>
					<li id="music" class="last">音乐</li>
				</ul>
			</div>
			<div class="cl"></div>
			<div class="content">
				<ul class="news123">
					<li><a href="#">新闻1新闻1新闻1</a></li>
					<li><a href="#">新闻2新闻2新闻2</a></li>
					<li><a href="#">新闻3新闻3新闻3</a></li>
				</ul>
				<ul class="move123">
					<li><a href="#">影视1影视1影视1</a></li>
					<li><a href="#">影视2影视2影视2</a></li>
					<li><a href="#">影视3影视3影视3</a></li>
				</ul>
				<ul class="music123">
					<li><a href="#">音乐1音乐1音乐1</a></li>
					<li><a href="#">音乐2音乐2音乐2</a></li>
					<li><a href="#">音乐3音乐3音乐3</a></li>
				</ul>
			</div>
		</div>

		<div class="xxk">
			<div class="nav">
				<ul>
					<li id="news" class="no_bg_btm">新闻</li>
					<li id="move">影视</li>
					<li id="music" class="last">音乐</li>
				</ul>
			</div>
			<div class="cl"></div>
			<div class="content">
				<ul class="news123">
					<li><a href="#">新闻1新闻1新闻1</a></li>
					<li><a href="#">新闻2新闻2新闻2</a></li>
					<li><a href="#">新闻3新闻3新闻3</a></li>
				</ul>
				<ul class="move123">
					<li><a href="#">影视1影视1影视1</a></li>
					<li><a href="#">影视2影视2影视2</a></li>
					<li><a href="#">影视3影视3影视3</a></li>
				</ul>
				<ul class="music123">
					<li><a href="#">音乐1音乐1音乐1</a></li>
					<li><a href="#">音乐2音乐2音乐2</a></li>
					<li><a href="#">音乐3音乐3音乐3</a></li>
				</ul>
			</div>
		</div>

		<div class="xxk">
			<div class="nav">
				<ul>
					<li id="news" class="no_bg_btm">新闻</li>
					<li id="move">影视</li>
					<li id="music" class="last">音乐</li>
				</ul>
			</div>
			<div class="cl"></div>
			<div class="content">
				<ul class="news123">
					<li><a href="#">新闻1新闻1新闻1</a></li>
					<li><a href="#">新闻2新闻2新闻2</a></li>
					<li><a href="#">新闻3新闻3新闻3</a></li>
				</ul>
				<ul class="move123">
					<li><a href="#">影视1影视1影视1</a></li>
					<li><a href="#">影视2影视2影视2</a></li>
					<li><a href="#">影视3影视3影视3</a></li>
				</ul>
				<ul class="music123">
					<li><a href="#">音乐1音乐1音乐1</a></li>
					<li><a href="#">音乐2音乐2音乐2</a></li>
					<li><a href="#">音乐3音乐3音乐3</a></li>
				</ul>
			</div>
		</div>

		<div class="xxk">
			<div class="nav">
				<ul>
					<li id="news" class="no_bg_btm">新闻</li>
					<li id="move">影视</li>
					<li id="music" class="last">音乐</li>
				</ul>
			</div>
			<div class="cl"></div>
			<div class="content">
				<ul class="news123">
					<li><a href="#">新闻1新闻1新闻1</a></li>
					<li><a href="#">新闻2新闻2新闻2</a></li>
					<li><a href="#">新闻3新闻3新闻3</a></li>
				</ul>
				<ul class="move123">
					<li><a href="#">影视1影视1影视1</a></li>
					<li><a href="#">影视2影视2影视2</a></li>
					<li><a href="#">影视3影视3影视3</a></li>
				</ul>
				<ul class="music123">
					<li><a href="#">音乐1音乐1音乐1</a></li>
					<li><a href="#">音乐2音乐2音乐2</a></li>
					<li><a href="#">音乐3音乐3音乐3</a></li>
				</ul>
			</div>
		</div>

		<div class="xxk">
			<div class="nav">
				<ul>
					<li id="news" class="no_bg_btm">新闻</li>
					<li id="move">影视</li>
					<li id="music" class="last">音乐</li>
				</ul>
			</div>
			<div class="cl"></div>
			<div class="content">
				<ul class="news123">
					<li><a href="#">新闻1新闻1新闻1</a></li>
					<li><a href="#">新闻2新闻2新闻2</a></li>
					<li><a href="#">新闻3新闻3新闻3</a></li>
				</ul>
				<ul class="move123">
					<li><a href="#">影视1影视1影视1</a></li>
					<li><a href="#">影视2影视2影视2</a></li>
					<li><a href="#">影视3影视3影视3</a></li>
				</ul>
				<ul class="music123">
					<li><a href="#">音乐1音乐1音乐1</a></li>
					<li><a href="#">音乐2音乐2音乐2</a></li>
					<li><a href="#">音乐3音乐3音乐3</a></li>
				</ul>
			</div>
		</div>
	</body>

</html>